<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<title>tab auto onmouseover</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			.yy{
				position:absolute;
				height:440px;
				width:440px;
				left:0px;
				top:0px;
				text-align:center;
			}
			#sb{				
				background-color:gray;
				color:red;
				z-index:0;
			}
			#mask{
				background-image:url(psb.png);
				z-index:99;
				opacity:0.5;
				filter:alpha(opacity=50);
				display:none;
				
			}
			#animation{
				background-color:blue;
				display:none;
			}
		</style>
		
		
	</head>
	
	<body>

		<div id="sb" class="yy">
			测试遮罩效果
		</div>
		<div id = "mask" class="yy" >
			替换页面成功
		</div>
		
		<div id="animation" class="yy">
			
		</div>
		<!-- <h1>4444</h1>-->
		<script>
			
			var timer;
			function mask(){
					var myenvent = window.event;
					//alert(window.event);
			
					var bb = document.getElementById("mask");		
					bb.style.display="block";
					
					/*left to right
					bb.style.width = '0px';
					timer = setInterval(function(){
						
						pos +=10;
						bb.style.width = pos+ 'px';
						if(pos >=440){
							clearInterval(timer);
						}
						console.log(bb.style.left);
					}, 10);	*/
					/*right to left
					bb.style.left = '440px';
					bb.style.width = '0px';
					timer = setInterval(function(){
						pos +=10;
						bb.style.width = pos+ 'px';
						bb.style.left = (440 - pos) + 'px';
						if(pos >=440){
							clearInterval(timer);
						}
						console.log(bb.style.left);
					}, 10);*/
					
					/**/
					bb.style.top = '440px';
					bb.style.height = '0px';
					timer = setInterval(function(){
						pos +=10;
						bb.style.height = pos+ 'px';
						bb.style.top = (440 - pos) + 'px';
						if(pos >=440){
							clearInterval(timer);
						}
						console.log(bb.style.left);
					}, 10);
			}		
			
			function addEvent(el, type, fn) {
				if(window.addEventListener) {
					el.addEventListener(type, fn, false);
				}else if(window.attachEvent) {
					el.attachEvent('on' + type, fn);
				}
			}
			
			var pos = 0;
			(function(){
				var s = document.getElementById("sb");
				addEvent(s, "mouseover", mask);	
/*
				setInterval(function(){
					var vv = document.getElementById("animation");
					pos +=10;
					vv.style.left = pos+ 'px';
					if(pos > 1000){
						pos = 0;
					}
					console.log(vv.style.left);
				}, 10);
				*/
			})();
        
		</script>
	</body>

</html>